import { SmileOutlined } from '@ant-design/icons';
import React, {useEffect, useState} from 'react'

import {
  PageContainer,
  ProForm,
  ProFormSelect,
  ProFormText,
  ProFormTextArea,
  ProFormRadio
} from '@ant-design/pro-components';
import { Card, Form, Input, Radio } from 'antd';
import { QuestionTypeApi, QuestionSortApi } from '@/service'
import { 
  searchQuestionParams,
  sortItem,
  QuestionTypeItem
 } from '@/service/type'

export const AddCon:React.FC = () => {
   // 单选多选分类
   const [questionsSort, setQuestionsSort] = useState<sortItem[]>([])
   // 题库分类
  const [questionsType, setQuestionsType] = useState<QuestionTypeItem[]>([])
  const [query, setQuery] = useState<searchQuestionParams>({
    page: 1,
    pagesize: 10,
    type: undefined,
    classify: undefined,
    question: undefined
})
  // 物理化学分类
  const QuestionTypeData = async () => {
    try {
      const res = await QuestionTypeApi(query)
      setQuestionsType(res.data.data.list)
      console.log(res.data.data.list)
    } catch (e) {
      console.log(e)
    }
  }
  // 单选多选分类
  const QuestionSortData = async () => {
    try {
      const res = await QuestionSortApi()
      setQuestionsSort(res.data.data.list)
      console.log(questionsSort)
    } catch (e) {
      console.log(e)
    }
  }
  useEffect(() => {
    QuestionTypeData()
    QuestionSortData()
  }, [])
  return (
    <PageContainer >
      <Card>
        <ProForm
          submitter={{
            searchConfig: {
              resetText: '重置',
              submitText: '提交',
            },
            // 配置按钮的属性
            resetButtonProps: {
              style: {
                // 隐藏重置按钮
                display: 'none',
              },
            },
            submitButtonProps: {},
        
            // 完全自定义整个区域
            render: (props, doms) => {
              console.log(props);
              return [
                <button
                  type="button"
                  key="rest"
                  onClick={() => props.form?.resetFields()}
                >
                  重置
                </button>,
                <button
                  type="button"
                  key="submit"
                  onClick={() => props.form?.submit?.()}
                >
                  提交
                </button>,
                <button
                  type="button"
                  key="back"
                  onClick={() => window.location.href='/question/item-bank'}
                >
                  返回
                </button>
              ];
            },
          }}
            
          
          onFinish={async (values) => console.log(values)}
        >
          
          
          <ProForm.Group
            key='from-group1'
          >
            <ProFormSelect
              key='sel-1'
              options={questionsSort.map(it =>({
                value: it.value,
                label: it.name
              }))}
              width="xs"
              name="chapter"
              label="题型"
              rules={[
                {
                  required: true,
                  message: '请输入题型',
                }
              ]}
            />
            <ProFormSelect
              key='sel-2'
              width="xs"
              options={[
                {
                  value: 'time',
                  label: '分类',
                },
              ]}
              name="unusedMode"
              label="分类"
              rules={[
                {
                  required: true,
                  message: '请输入分类',
                }
              ]}
            />
          </ProForm.Group>
          <ProForm.Group
            key='from-group2'
          >
          <ProFormTextArea
            key='ta-1'
            width="xl"
            label="题目"
            name="remark"
            rules={[
              {
                required: true,
                message: '题目不能为空',
              }
            ]}
          />
           
          </ProForm.Group>
          <ProFormText width="sm" name="id" label="Main Contract Number" />
         
          
          <ProForm.Group
          key='from-group3'
          >
              {/* <ProFormRadio.Group
                label="选项"
                name="invoiceType"
                initialValue="Invoice"
                options={['A', 'B', 'C', 'D']}
                // options={[]}
                
              /> */}
            <Form.Item name="field" noStyle>
              <Radio value="A"> A </Radio>
              <Input />             
            </Form.Item>
          </ProForm.Group>
          
          
          <ProFormTextArea
            key='ta-2'
            width="xl"
            label="解析"
            name="remark"
          />
        </ProForm>
      </Card>
    </PageContainer>
);
};